<template>
  <div>
    <el-container style="height: 900px; border: 1px solid #eee">
      <el-main>
        <el-table
            :data="tableData"
            style="width: 100%;"
            max-height="1000px">
          <el-table-column
              fixed
              prop="id"
              label="Id"
              width="100">
          </el-table-column>
          <el-table-column
              prop="name"
              label="名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              width="200">
          </el-table-column>
          <el-table-column
              prop="lat"
              label="经度"
              width="120">
          </el-table-column>
          <el-table-column
              prop="lng"
              label="维度"
              width="120">
          </el-table-column>
          <el-table-column
              prop="state"
              label="状态"
              width="120">
          </el-table-column>
          <el-table-column
              prop="dtuid"
              label="dtuid"
              width="120">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="120">
            <template slot-scope="scope">
              <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="size">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      total: 0,//总共多少数据
      page: 1,//第几页
      size: 10//每页大小
    }
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.$mount();
    },
    handleCurrentChange(val) {
      this.queryByPage(val, this.size)
    }
  },
  mounted() {//钩子函数
    let that = this
    var config = {
      method: 'get',
      url: `http://localhost:8080/device/search?page=${this.page}&size=${this.size}`,
      headers: {}
    };

    axios(config)
        .then(function (response) {
          if (response.data.msg == "NOT_LOGIN") {
            that.$router.push("/login")
          } else {
            that.tableData = response.data.data
          }
        })
        .catch(function (error) {
          console.log(error);
        });
  }
}
</script>


<style>

</style>